<template>
  <el-dialog v-model="openContentDialog" :title="title" width="500px">
    <div v-if="type === 'text'">
      <el-input v-model="textarea" style="width: 100%;" :rows="6" type="textarea" placeholder="请输入发送内容" />
      <div class="dialog-footer footer">
        <el-button @click="openContentDialog = false">取消</el-button>
        <el-button type="primary" @click="addText">确认</el-button>
      </div>
    </div>
    <div v-else>
      <div class="dialog-footer footer">
        <el-button type="primary" @click="openLocalFile(type)">浏览</el-button>
        <el-button @click="openContentDialog = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import emitter from "@/utils/mitt-bus";
import { ElMessage } from 'element-plus';

const contentDict = {
  'text': {
    'title': '添加文本',
  },
  'image': {
    'title': '添加图片',
  },
  'file': {
    'title': '添加文件',
  },
}

export default {
  data() {
    return {
      openContentDialog: false,
      title: '',
      type: '',
      textarea: '',
    };
  },
  mounted() {
    emitter.on("openContentDialog", (type) => {
      this.openContentDialog = true;
      this.type = type
      this.title = contentDict[type]['title']
    });
  },
  methods: {
    addText() {
      if (!this.textarea) {
        ElMessage.error('内容不能为空')
        return
      }
      this.taggleAddContent(this.textarea)
    },

    async openLocalFile(type) {
      let options = {}
      if (type === 'image') {
        options = {
          title: '选择',
          filters: [
            { name: 'Images', extensions: ['jpg', 'png', 'jpeg', 'gif'] }
          ]
        }
      } else if (type === 'file') {
        options = {
          properties: ['openFile']
        }
      }

      const filePath = await window.electronAPI.selectOpenFile(options)
      if (filePath) {
        this.taggleAddContent(filePath)
      }
    },

    taggleAddContent(content) {
      emitter.emit("onAddContent", {
        type: this.type,
        content: content,
      })
      this.openContentDialog = false;
    },
  }
};
</script>
<style>
.label {
  font-size: 12px;
  font-weight: bolder;
  margin: 0 10px;
}

.footer {
  box-sizing: border-box;
  padding-top: var(--el-dialog-padding-primary);
  text-align: right;

}

.upload {
  border: 1px dashed var(--el-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}
</style>